<template>
  <!-- 一门清页面 -->
  <view class="easyClear">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClear-content" :style="[{'top': top + 'px'}]">
      <!-- tab样式-->
      <view class="nav-tab">
        <view class="nav-tab-item" :class="isActive == item.id ? 'isTabActive' : ''" @click="getGuideType(item.id)"
          v-for=" (item,index) in category" :key="index">
          <view class="nav-left-img">
            <image v-if="isActive == item.id" :src="'/myPackageA/static/easyClear/clear-active-'+item.id+'.png'"
              mode=""></image>
            <image v-else :src="'/myPackageA/static/easyClear/clear-'+item.id+'.png'" mode=""></image>
          </view>
          <view class="nav-right-title">
            {{item.name}}
          </view>
        </view>
      </view>
      <!-- 轮播图 -->
      <view class="swiper-content">
        <view class="swiper-box">
          <swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval=3000>
            <swiper-item class="index-swiper-item" @click="toBusiness(item)" v-for="(item,index) in swiperList"
              :key="index">
              <image class="i-image" :src="item.carouselImg"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- 新手指南内容 -->
      <view class="easy-list-box">
        <view class="easy-item" @click="toBusiness(item)" v-for="(item , index) in skiList" :key="index">
          <view class="ei-left">
            <image :src="item.file" mode=""></image>
          </view>
          <view class="ei-right">
            <view class="eir-title">
              {{item.title}}
            </view>
            <view class="eir-see-box">
          <!--<image src="/myPackageA/static/easyClear/see.png" mode=""></image> -->    
              <view class="see-len">
                {{item.publishTime}}
              </view>
            </view>
          </view>
        </view>
        <i-divider v-if="skiList.length > 0" :loadingType="loadingType"></i-divider>
      </view>
    </view>
  </view>
</template>

<script>
  import iDivider from '../../../components/i-divider/i-divider.vue'
  export default {
    components: {
      iDivider
    },
    data() {
      return {
        isActive: 8,//一门清一进来要新手选中
        childTitle: '一门清',
        loadingType: 0, //加载文字类型
        param: {
          pageSize: 4,
          pageNum: 1
        },
        top: 0,
        swiperType: 1,
        swiperList: [], //轮播图列表
        category: [{ //分类按钮
          name: '新手',
          id: 8
        }, {
          name: '雪场',
          id: 1
        }, {
          name: '住宿',
          id: 2
        }, {
          name: '教学',
          id: 3
        }, {
          name: '雪具',
          id: 4
        }, {
          name: '餐饮',
          id: 5
        }, {
          name: '交通',
          id: 6
        }, {
          name: '摄影',
          id: 7
        }],
        skiList: [],
        totalPage:0
      }
    },
    onLoad(options) {
      // 判断是否有typeId
      if (options.typeId) {
        this.getGuideType(options.typeId)
      } else {
        this.getGuideType()
      }
    },
    // 上拉分页
    onReachBottom() {
      this.param.pageNum++;
      if (this.loadingType !== 0) {
        return false;
      }
      this.loadingType = 1;
      this.getGuideList()
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '一门清',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '一门清',
		    imageUrl: this.img,
		  }
		},
      // 获取新手指南的选中样式
      getGuideType(id) {
        if (id) {
          this.isActive = id
        }
        this.skiList = []
        this.param.pageNum = 1
        this.getGuideList()
        this.getGuideSwiper()
      },
      // 获取轮播图列表
      getGuideSwiper() {
		  /*
        let _this = this
        // 定义url，如果类型值ISActive不是0就传type，没有就不传
        let typeUrl = ''
        if (_this.isActive == 0) {
          typeUrl = _this.$httpApi.install.getGuideSwiper
        } else {
          typeUrl = _this.$httpApi.install.getGuideSwiper + '?name=' + _this.isActive
        }
        uni.request({
          url: typeUrl,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.swiperType = res.data.data.type;
              _this.swiperList = res.data.data.list;
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
		*/
	   let _this = this
	   wx.request({
	     url: this.$httpApi.install.getSeeding,
	   		data:{
	   			carouselPosition:'ONE_SEE'
	   		},
	     method: 'GET',
	     success(res) {
	       console.log('首页轮播图>>>>>>', res)
	       _this.swiperList = res.data.data
	     },
	   })
      },
      // 获取新手指南列表
      getGuideList() {
        let _this = this
        // 定义url，如果类型值ISActive不是0就传type，没有就不传
        let typeUrl = ''
        if (_this.isActive == 0) {
          typeUrl = _this.$httpApi.install.getGuideList
        } else {
          typeUrl = _this.$httpApi.install.getGuideList + '?name=' + _this.isActive
        }
        uni.request({
          url: typeUrl,
          method: 'GET',
          data: this.param,
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              if (res.data.rows.length == 0) { //没有数据
                _this.loadingType = 2;
                return;
              }
              _this.totalPage = Math.ceil(res.data.total / _this.param.pageSize)
              // 不足分页数量
              if (_this.param.pageNum >= _this.totalPage) {
                _this.loadingType = 2;
              } else {
                _this.loadingType = 0; //将loadingType归0重置
              }
              _this.skiList = _this.skiList.concat(res.data.rows);
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      // 如果是商家跳转到商家详情，如果是新手指南跳转到图文终端
      toBusiness(item) {
        uni.navigateTo({
          url: '/myPackageA/pages/guideDetail/guideDetail?businessId=' + item.id
        })
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>
<style lang="scss">
  .easyClear-content {
    position: absolute;

    .nav-tab {
      width: 100%;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      display: flex;
      flex-wrap: wrap;

      .nav-tab-item {
        width: 165rpx;
        height: 112rpx;
        padding: 0 25rpx;
        background: linear-gradient(360deg, #FFFFFF 0%, rgba(200, 240, 234, 0.4) 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 1rpx solid #99D4CE;

        display: flex;
        align-items: center;
        justify-content: space-between;

        &:nth-child(n+5) {
          margin-top: 20rpx;
        }

        .nav-left-img {
          width: 75rpx;
          height: 55rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .nav-right-title {
          font-size: 28rpx;
          width: 30rpx;
          line-height: 34rpx;
          color: #A4A4A4;
        }
      }
    }

    .isTabActive {
      background: linear-gradient(180deg, #6AF6AB 0%, #3EF6E3 100%) !important;
      border: 1rpx solid #5BD2C6 !important;

      .nav-right-title {
        font-size: 28rpx !important;
        font-weight: bold;
        color: #303030 !important;
      }
    }

    .swiper-content {
      padding: 0 30rpx;

      // 轮播图
      .swiper-box {
        margin-top: 30rpx;
        width: 100%;

        .uni-swiper-wrapper {
          width: 690rpx;
          height: 340rpx;

          /deep/ .wx-swiper-dot {
            // 指示点元素默认样式
            width: 16rpx !important;
            height: 16rpx !important;
            background: #64787B !important;
            border-radius: 50%;
          }

          /deep/ .wx-swiper-dot-active {
            // 指示点元素激活（当前选中）状态样式
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            width: 63rpx !important;
            height: 16rpx !important;
            background-color: #303030 !important;
          }

          .index-swiper-item {
            border-radius: 20rpx;

            .i-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .easy-list-box {
      margin-top: 30rpx;
      // 雪圈内容
      width: 100%;
      height: 100%;
      padding: 0 30rpx 20rpx 30rpx;

      .easy-item {
        width: 690rpx;
        height: 164rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        display: flex;

        .ei-left {
          width: 220rpx;
          height: 124rpx;
          border-radius: 20rpx;
          background-color: gray;
		margin: 20rpx;
          image {
			      border-radius: 20rpx;
            width: 100%;
            height: 100%;
          }
        }

        .ei-right {
          flex: 1;
          padding: 22rpx 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .eir-title {
            font-size: 32rpx;
            color: #303030;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; //当属性值为3，表示超出3行隐藏
          }

          .eir-see-box {
            display: flex;

            image {
              width: 28rpx;
              height: 28rpx;
            }

            .see-len {
              margin-left: 4rpx;
              font-size: 18rpx;
              color: #595959;
            }
          }
        }
      }

    }
  }
</style>